<template>
  <d-config-provider>
    <div>
      <d-collapse>
        <template #expandIcon="{ isActive }">
          <div style="margin-right: 10px;position: relative;">{{ isActive }}</div>
        </template>
        <d-collapse-panel key="1" header="This is panel header 1">
          <p>{{ text }}</p>
        </d-collapse-panel>
        <d-collapse-panel
          key="2"
          header="This is panel header 2"
          :disabled="false"
        >
          <p>{{ text }}</p>
        </d-collapse-panel>
        <d-collapse-panel key="3" header="This is panel header 3" disabled>
          <p>{{ text }}</p>
        </d-collapse-panel>
      </d-collapse>
    </div>
  </d-config-provider>
</template>

<script>
export default {
  data() {
    return {
      text: `A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it can be found as a welcome guest in many households across the world.`
    };
  }
};
</script>

<style lang="scss" scoped></style>
